import { Component } from '@angular/core';
import { AppService } from './service/app.service';
import html2canvas from "html2canvas";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  checked
  checked2

  title = 'code';
  phoneList: any = [];

  hour: any;
  minute: any;

  imgUri: any;
  windowWidth: any;

  selectedPhoneValue: any;
  imgTitle: any = "小圆子吃喝玩乐分享二群(254)";


  watchList = [];

  watchImg: any = [];

  advTitle: any="浓情端午 汉吉健康体验计划 中青老年父母健康体验计划";
  advStitle: any="浓情端午 汉吉健康体验计划 中青老年父母健康体验计划";


  isVisible = false;

  dataSet: any = [];

  setHeadImgUrl:any;

  constructor(
    private service: AppService
  ) {

    this.windowWidth = window.screen.availWidth;
  }

  ngOnInit() {

    this.phoneList = this.service.getPhoneInfor();
    this.selectedPhoneValue = this.phoneList[0];
    this.init();
  }




  visible = false;

  open(): void {
    this.visible = true;
  }

  close(): void {
    this.visible = false;
  }



  init() {


    for (let index = 1; index < 1665; index++) {
      this.dataSet.push(index);
    }

    this.setHeadImgUrl = this.service.randomNumber(1, 1665, true);

    this.randomTime();

    this.watchList.push({
      font: "",
      isShowTime: false,
      dateTime: this.service.randomNumber(8, 21) + ':' + this.service.randomNumber(0, 59),
      headImg: this.service.randomNumber(1, 1665),
      isShowAdv: false
    })
  }

  setHeadImg(url){
    this.setHeadImgUrl = url;
    this.handleCancel();
  }


  showModal(): void {
    this.isVisible = true;
  }

  handleOk(): void {
    console.log('Button ok clicked!');
    this.isVisible = false;
  }

  handleCancel(): void {
    console.log('Button cancel clicked!');
    this.isVisible = false;
  }
  addInfor() {

    let t = this.service.randomNumber(8, 21) + ':' + this.service.randomNumber(0, 59);
    this.watchList.push({
      font: "",
      isShowTime: false,
      dateTime: t,
      headImg: this.service.randomNumber(1, 1665, true),
      isShowAdv: false
    });
  }

  inforData() {
    this.watchImg = JSON.parse(JSON.stringify(this.watchList));


    this.visible=false;
  }

  randomTime() {
    this.hour = this.service.randomNumber(8, 21);
    this.minute = this.service.randomNumber(0, 59);
  }

  checkPhone(item) {
    this.randomTime();
    this.selectedPhoneValue = item;
  }

  adcImg: any;
  fileChange(file) {


    var reader = new FileReader();


    let img = file.target.files[0];

    console.log(img);
    reader.readAsDataURL(img);

    reader.onload = (e) => {
      this.adcImg = e.target.result;
    }




  }

  canvasImg() {

    document.getElementById("contentView").innerHTML = "";

    var opts = {
      useCORS: true // 【重要】开启跨域配置
    };
    html2canvas(document.getElementById("allView"), opts).then(canvas => {

      let img_type = "png";
      this.imgUri = canvas
        .toDataURL("image/" + img_type)
        .replace("image/" + img_type, "image/octet-stream");
      var myIcon = new Image();
      myIcon.src = this.imgUri;
      // myIcon.width = 500; 
      // myIcon.height = this.selectedPhoneValue.height;

      document.getElementById("contentView").appendChild(myIcon);

    });
  }
}
